window.addEventListener("load",function(){
    // 日期：2022年5月21日 19点 17分；
    var i=0;
    var x=0;
    let moveBottom1=document.querySelector(".moveBottom1");
    //右侧按钮！
    let moveBottom2=document.querySelector(".moveBottom2");
    //左按钮
    let 主页广告=document.querySelector(".主页广告");
    // 主页广告
    let 主页广告ul=document.querySelector(".主页广告ul");
    //获取主页广告的ul;
    let 主页广告图片=document.querySelectorAll(".主页广告图片");
    // 获取 广告图片！
    let floatingPointBoxOl=document.querySelector(".floatingPointBoxOl");
    //获取 ol
    for (let i = 0; i <=主页广告图片.length-2 ; i++) {
        var li =document.createElement("li");
        //创建元素！  这里要注意：在我们创建元素的时候
        // document.createElement()括号里面打上引号 直接 输入 我们要添加的 元素
        // 例如：var li =document.createElement("li");var div =document.createElement("div");
        li.className = "floatingPoint"
        //给我我们创建的 元素起一个class 名字！
        floatingPointBoxOl.appendChild(li);
    // floatingPointBoxOl.insertBefore(li);==>这个添加失败了！
    //     父元素           添加方式        创建的元素   位置
    //    把我们创建出来的元素 添加到 父元素里面的第一个位置！
    }
    let floatingPoint=document.querySelectorAll(".floatingPoint");
    //  <li class="floatingPoint"></li>
    //小li圆圈！

    floatingPoint[0].style.color="#f5e90d";
    //重复定时器：
    let playAnimation=null;
    playAnimation=window.setInterval(timerFunction,2500);
    //                                    定时器函数！

    主页广告.addEventListener("mouseover",function (){
        clearInterval(playAnimation);

        // 给广告盒子注册鼠标经过事件！
        moveBottom1.style.visibility="revert";
        moveBottom2.style.visibility="revert";
        //使左右移动的符号显示出来！
        moveBottom1.addEventListener("mouseover",function (){
            moveBottom1.style.cursor="default";
        });
        moveBottom2.addEventListener("mouseover",function (){
            moveBottom2.style.cursor="default";
        });

        });

    for (let j = 0; j <floatingPoint.length ; j++) {
        floatingPoint[j].addEventListener("click",function (){
            for (let k = 0; k < floatingPoint.length; k++) {
                floatingPoint[k].style.color="";
            }
            this.style.color="#f5e90d";
            // 主页广告ul.style.marginLeft=-(721*(j))+"px";
            animationMove(主页广告ul,-(721*j));
            i=j;
        })
    }

    moveBottom1.addEventListener("click",function (){
        //右侧按钮！注册点击事件！
        i++;
        if(i==主页广告图片.length-1){
            i=0;
            animationMove(主页广告ul,-(721*i));
            // 主页广告ul.style.marginLeft=-(721*i)+"px";
            for (let j = 0; j < floatingPoint.length; j++) {
                floatingPoint[j].style.color="";
            }
            floatingPoint[i].style.color="#f5e90d";

        }else{
            animationMove(主页广告ul,-(721*i));
            // 主页广告ul.style.marginLeft=-(721*i)+"px";
            for (let j = 0; j < floatingPoint.length; j++) {
                floatingPoint[j].style.color="";
            }
            floatingPoint[i].style.color="#f5e90d";
        }

    });

    moveBottom2.addEventListener("click",function (){
        //左侧按钮！注册点击事件！
        i--;
        if(i<0){
            i=主页广告图片.length-2;
            // 主页广告ul.style.marginLeft=-(721*(i))+"px";
            animationMove(主页广告ul,-(721*i));

            for (let j = 0; j < floatingPoint.length; j++) {
                floatingPoint[j].style.color="";
            }
            floatingPoint[floatingPoint.length-1].style.color="#f5e90d";
        }else{
         // 主页广告ul.style.marginLeft=-(721*(i))+"px";
            animationMove(主页广告ul,-(721*i));
            for (let j = 0; j < floatingPoint.length; j++) {
                floatingPoint[j].style.color="";
            }
            floatingPoint[i].style.color="#f5e90d";

        }

    });


    // 定时器函数：
    function  timerFunction() {
        i++;
        if(i==主页广告图片.length-1){
            i=0;
            // animationMove(主页广告ul,-(721*i));
            // 主页广告ul.style.marginLeft=-(721*i)+"px";
            animationMove(主页广告ul,-(721*i));
            for (let j = 0; j < floatingPoint.length; j++) {
                floatingPoint[j].style.color="";
            }
            floatingPoint[i].style.color="#f5e90d";

        }else{
            animationMove(主页广告ul,-(721*i));
            // 主页广告ul.style.marginLeft=-(721*i)+"px";
            for (let j = 0; j < floatingPoint.length; j++) {
                floatingPoint[j].style.color="";
            }
            floatingPoint[i].style.color="#f5e90d";
        }
    }

    主页广告.addEventListener("mouseout",function (){
        // 给广告盒子注册鼠标离开事件！
        moveBottom1.style.visibility="hidden";
        moveBottom2.style.visibility="hidden";
        //使左右移动的符号隐藏起来！
        playAnimation=window.setInterval(timerFunction,2500);

    });


    //  下面的 代码 来源于：动画移动2！

    //  动画移动1
    function animationMove(obj,finalPosition,stopFunction){
        //animationMove  动画移动！  obj  对象！ //finalPosition 最终位置 //stopFunction 回调函数
        clearInterval(obj.timer);
        // 上面这行代码很重要！
        // 这行代码一定要放在 定时器的上面
        // 如果连续点击 开始按钮我们的程序就会出现bug  所有我们在这里 加上一个 结束语句 就可以很好避免bug
        //因为 当同一个名称传进来的时候 就会先结束她 然后再启动她 就不会有印象了！
        obj.timer=setInterval(animation,15);
        function animation(){
            // 这里的 定时器我们一个 使用重复定时器！
            if(obj.offsetLeft===finalPosition){
                //  这个 判断语句 必须放在 这个函数里面 每次循环 都来判断一下！
                clearInterval(obj.timer);
                //    会掉函数是 在 调用回调函数的对象执行完毕以后 才开始执行的 所以我们把回调函数放到  停止定时器以后去执行
                if(stopFunction){
                    // 我们先判断 stopFunction 回调函数是否存在
                    stopFunction();
                }
                return;
            }
            let remainingDistance=(finalPosition-  obj.offsetLeft)/10;
            // 这里可以进行分布运算  详细解析：第一次先：走十分之一  第二次走剩下的十分之一 以此类推！
            remainingDistance=   remainingDistance>0?(Math.ceil(remainingDistance)):(Math.floor(remainingDistance));
            //这里我们要进行取整： 剩余距离大于0是我们向上取整(Math.ceil)  剩余距离小于0我们向下取整(Math.floor);
            obj.style.left=obj.offsetLeft+remainingDistance+"px";
            // 上面三行代码用于处理变速移动动画！
            // obj.offsetLeft>finalPosition?(obj.style.left=obj.offsetLeft-1+"px"):(obj.style.left=obj.offsetLeft+1+"px");
            //  上面这行代码可以使用 目标对象 来回移动 即我们可以使 目标对象 进行正向移动 或反向移动！
            //    要是有 动画效果必须 给调用对象 添加定位！
        }
    }
})
